<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="admin::header">
    <link rel="stylesheet" href="../static/bootstrap-wysiwyg-demo/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../static/bootstrap-wysiwyg-demo/fontawesome/css/font-awesome.min.css"/>
    <script type="text/javascript" src="../static/bootstrap-wysiwyg-demo/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript"
            src="../static/bootstrap-wysiwyg-demo/bootstrap-wysiwyg/external/jquery.hotkeys.js"></script>
    <script type="text/javascript" src="../static/bootstrap-wysiwyg-demo/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript"
            src="../static/bootstrap-wysiwyg-demo/bootstrap-wysiwyg/bootstrap-wysiwyg.js"></script>
    <style>
        .editor-container { /* 编辑器容器样式 */
            padding: 10px 20px 25px;
            margin-bottom: 10px;
            background-color: #eeeeee;
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            border-radius: 6px;
        }

        .btn-toolbar {
            font-size: 0;
            margin-top: 10px;
            margin-bottom: 10px;
        }

        #editor { /* 编辑框样式 */
            max-height: 400px;
            height: 400px;
            background-color: white;
            border-collapse: separate;
            border: 1px solid rgb(204, 204, 204);
            padding: 4px;
            box-sizing: content-box;
            -webkit-box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
            box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
            border-top-right-radius: 3px;
            border-bottom-right-radius: 3px;
            border-bottom-left-radius: 3px;
            border-top-left-radius: 3px;
            overflow: scroll;
            outline: none;
        }

        .btn-toolbar .btn {
            /* 工具条里按钮样式，这个样式其实是.btn-default的样式，
            Button按钮之所以没有直接加上.btn-default样式是因为按钮选中后wysiwyg会给选中的按钮加.btn-info样式，
            .btn-default和.btn-info同时存在样式会冲突   */
            color: #333;
            background-color: #fff;
            border-color: #ccc;
        }

        .btn-toolbar .btn-info {
            /* 这个样式其实是.btn-info的样式，重写一遍是为了提高优先级，
            否则.btn-info的样式会被.btn-toolbar .btn覆盖，这个样式要写在.btn-toolbar .btn之下 */
            color: #fff;
            background-color: #5bc0de;
            border-color: #46b8da;
        }
    </style>
</head>
<section>
    <script>
        $(function () {
            // 初始化工具条
            initToolbarBootstrapBindings();

            $("#editor").wysiwyg();
        });

        // 初始化工具条
        function initToolbarBootstrapBindings() {
            // 字体样式
            var fonts = ['Serif', 'Sans', 'Arial', 'Arial Black', 'Courier',
                    'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact',
                    'Lucida Grande', 'Lucida Sans', 'Tahoma', 'Times',
                    'Times New Roman', 'Verdana'],
                fontTarget = $('[title=Font]').siblings('.dropdown-menu');
            $.each(fonts, function (idx, fontName) {
                fontTarget.append($('<li><a href="#" data-edit="fontName ' + fontName
                    + '" style="font-family:\'' + fontName + '\'">' + fontName + '</a></li>'));
            });

            $('button[title]').tooltip({
                container: 'body'
            });

            // .dropdown-menu下的input事件
            $('.dropdown-menu input').click(function () {
                return false;
            })
                .change(function () {
                    $(this).parent('.dropdown-menu').siblings('.dropdown-toggle').dropdown('toggle');
                })
                .keydown('esc', function () {
                    this.value = '';
                    $(this).change();
                });

            // [data-role=magic-overlay]的样式
            $('[data-role=magic-overlay]').each(function () {
                var overlay = $(this), target = $(overlay.data('target'));
                overlay.css('opacity', 0).css('position', 'absolute')
                    .offset(target.offset()).width(target.outerWidth())
                    .height(target.outerHeight());
            });
        };
    </script>
</section>
<body class="sidebar-fixed header-fixed">
<div class="page-wrapper">
    <!--导入上边栏-->
    <nav class="navbar page-header" th:include="admin::admin-navbar"></nav>
    <!--导入侧边栏-->
    <div class="main-container">
        <div class="sidebar" th:include="admin::admin-sidebar">
        </div>
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="editor-container">
                        <div class="btn-toolbar" role="toolbar" data-role="editor-toolbar"
                             data-target="#editor" th:include="wysiwyg-demo::wysiwyg-demo-toolbar">
                        </div>
                        <div id="editor">
                            <h1>你好啊</h1>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    </div>
</div>

</body>
</html>
